<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex-shrink属性</title>
  <style>
    .d,.dflex {
      width: 100%;
      height: 200px;
      background-color: orange;
      display: flex;
      flex-wrap: wrap;
    }
    .d1,.d2,.d3,.d4,.d5,.d6 {
      width: 400px;
      height: 100px;
      background-color: lightblue;
      margin-right: 5px;
      margin-bottom: 5px;
    }
    .d1,.d3 {
      /*flex-shrink: 指定盒子缩小的比例,1默认值，会自动缩小*/
      flex-shrink: 1;
    }
    .d2 {
      /*flex-shrink: 0 维持原比例，不缩小*/
      flex-shrink: 0;
    }
    .d4 {
      /*flex-basis: 定义子盒子在主轴上的大小，此时有剩余空间才会起作用;*/
      flex-basis: 600px;
    }
    .dflex .d3 {
      /*flex: 是一个组合属性*/
      flex: 2 0 500px;  /* 相当于（按顺序写）：flex-grow flex-shrink flex-basis三个子属性*/
    }
  </style>
</head>
<body>
<h1>1. 盒子的放大与缩小(各个独立属性写法) <hr size="5" color="red"></h1>
<div class="d">
  <div class="d1">d1</div>
  <div class="d2">d2(flex-shrink: 0)</div>
  <div class="d3">d3</div>
  <div class="d4">d4</div>
  <div class="d5">d5</div>
  <div class="d6">d6</div>
</div>
<h1>2. 盒子的放大与缩小(综合属性写法) <hr size="5" color="red"></h1>
<div class="dflex">
  <div class="d1">d1</div>
  <div class="d2">d2(flex-shrink: 0)</div>
  <div class="d3">d3</div>
  <div class="d4">d4</div>
  <div class="d5">d5</div>
  <div class="d6">d6</div>
</div>
</body>
</html>
